<template>
  <vue3-pro-table
    ref="proTable"
    style="height: 100%"
    :fit="true"
    :click-to-select="true"
    :request="tableProps.request"
    :columns="tableProps.columns"
    :pagination="false"
  >
    <template #toolbar>
      <ElButton type="primary" @click="handleAdd">
        <ElIcon>
          <Plus/>
        </ElIcon>
        新增
      </ElButton>
      &nbsp;&nbsp;
      <el-radio-group v-model="queryLabel" size="mini">
        <el-radio-button value="" label="">全部</el-radio-button>
        <el-radio-button value="肝" label="肝">肝</el-radio-button>
        <el-radio-button value="胆" label="胆">胆</el-radio-button>
        <el-radio-button value="脾" label="脾">脾</el-radio-button>
        <el-radio-button value="胰" label="胰">胰</el-radio-button>
        <el-radio-button value="肾" label="肾">肾</el-radio-button>
      </el-radio-group>
    </template>
    <template #tdTitle="{ row, $index }">
      <ElInput
        type="text"
        v-model="row.title"
        v-if="isEdit && isEditIndex === $index"
      ></ElInput>
      <div v-else>{{ row.title }}</div>
    </template>
    <template #tdContent="{ row, $index }">
      <ElInput
        type="text"
        v-model="row.content"
        v-if="isEdit && isEditIndex === $index"
      ></ElInput>
      <div v-else>{{ row.content }}</div>
    </template>
    <template #operate="{ row, $index }">
      <ElButton
        size="small"
        v-if="isEdit && isEditIndex === $index"
        @click="handleSave(row)"
        type="primary"
      >保存
      </ElButton
      >
      <ElButton
        size="small"
        v-if="!isEdit"
        @click="handleEdit(row, $index)"
        type="success"
      >编辑
      </ElButton
      >
      <ElButton
        size="small"
        v-if="!isEdit"
        type="danger"
        @click="handleDel(row)"
      >删除
      </ElButton
      >
      <ElButton
        size="small"
        v-if="isEdit && isEditIndex === $index"
        @click="handleCancel(row)"
        type="warning"
      >取消
      </ElButton
      >
    </template>
  </vue3-pro-table>
</template>

<script setup lang="ts">
import {reactive, ref, toRaw, watch} from "vue";
import {db} from "@/db/db";
import {ElMessage} from "element-plus";

// 肝 胆 脾 胰 肾
import demoList from "./demo.json"

console.log(demoList)
const init = async () => {
  const count = await db.busResult.count();
  if (count < 80) {
    await db.busResult.bulkAdd(demoList.map(item => {
      return {
        title: item["-item"],
        content: item["-itemdes"] as string
      }
    }))
  }
}
init().then(()=>{
  proTable.value.refresh();
})
const proTable = ref();

const isEdit = ref(false);
const isEditIndex = ref(0);
let cacheRow: any = {};
const handleAdd = () => {
  const row = {
    title: "",
    content: "",
  };
  proTable.value.tableData.unshift(row);
  isEditIndex.value = 0;
  isEdit.value = true;
  cacheRow = JSON.stringify(row);
};
const handleDel = async (row) => {
  await db.busResult.delete(row.id);
  proTable.value.refresh();
};
const handleSave = async (row) => {
  await db.busResult.put(toRaw(row));
  ElMessage.success("保存成功");
  isEdit.value = false;
  proTable.value.refresh();
};
const handleCancel = (row) => {
  isEdit.value = false;
  proTable.value.refresh();
};

const handleEdit = (row, index) => {
  cacheRow = JSON.stringify(row);
  console.log(index);
  isEditIndex.value = index;
  isEdit.value = true;
};
const queryLabel=ref("")
watch(queryLabel,()=>{
  proTable.value.refresh();
})
const tableProps = reactive({
  request: async () => {
    const data = await db.busResult.toArray();
    let result;
    if(queryLabel.value){
      result = data.filter(item=>{
        return item.title.indexOf(queryLabel.value)!==-1
      })
    }else{
      result = data;
    }
    
    return {
      data: result.reverse(),
      total: data.length,
    };
  },
  columns: [
    {
      type: "selection",
    },
    {
      label: "标题",
      prop: "title",
      tdSlot: "tdTitle",
      width:200
    },
    {
      label: "内容",
      prop: "content",
      tdSlot: "tdContent",
    },
    {
      label: "操作",
      fixed: "right",
      width: 180,
      align: "center",
      tdSlot: "operate", // 自定义单元格内容的插槽名称
    },
  ],
});
const getData = ()=>{
  return proTable.value.getSelectionRows()
}
defineExpose({getData})
</script>

<style scoped lang="scss"></style>
